<template>
  <!-- 用户填写的主表单 -->
  <VFormRender
    ref="preFormRef"
    :form-json="formJson"
    :form-data="formData"
    :disabled="isFormDisabled"
    v-if="Object.keys(formJson).length !== 0"
  />
  <div v-else class="msg">用户没有填写主表单</div>
</template>

<script>
import VFormRender from '@/components/FormDesigner/form-render/index.vue';

export default {
  name: 'YourComponentName',
  components: {
    VFormRender
  },
  props: {
    formJson: {
      type: Object,
      default: () => ({})
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isFormDisabled: true, // 假设初始状态为禁用
      localFormData: null, // 新增本地数据存储表单数据
    };
  },
  methods: {
    enableForm() {
      this.isFormDisabled = false;
    },
    refreshComponent() {
      // 刷新组件状态或数据
      this.fetchData();
    },
    fetchData() {
      // 数据获取逻辑
    },
    getUpdatedFormData() {
      const formRender = this.$refs.preFormRef;
      if (formRender && formRender.getFormData) {
        return formRender.getFormData()
          .then(formData => {
            this.localFormData = formData; // 更新本地数据
            return formData; // 返回数据
          })
          .catch(error => {
            console.error('获取表单数据失败：', error);
            throw error; // 抛出错误，以便在外部捕获
          });
      } else {
        console.warn('preFormRef 未定义');
        throw new Error('preFormRef 未定义'); // 抛出错误，以便在外部捕获
      }
    },
    getFormStructure() {
  const formRender = this.$refs.preFormRef;
  if (formRender && formRender.getFormStructure) {
    const formStructure = formRender.getFormStructure();
    return formStructure;
  } else {
    console.warn('preFormRef 未定义');
    throw new Error('preFormRef 未定义'); // 抛出错误，以便在外部捕获
  }
},
    setFormJsonInChildComponent(newFormJson) {
      const formRender = this.$refs.preFormRef;
      if (formRender && formRender.setFormJson) {
        formRender.setFormJson(newFormJson);
        this.getUpdatedFormData();
      } else {
        console.error('preFormRef is not defined or the component is not mounted yet.');
      }
    }
  },
  watch: {
    formJson: {
      deep: true,
      handler() {
        this.localFormData = { ...this.formJson }; // 确保本地数据与formJson同步
      }
    },
    formData: {
      deep: true,
      handler() {
        this.localFormData = { ...this.formData }; // 确保本地数据与formData同步
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const formRender = this.$refs.preFormRef;
      if (formRender) {
        this.getUpdatedFormData();
        this.localFormData = { ...this.formData };
        this.localFormData = { ...this.formJson };
      } else {
        console.warn('preFormRef 未定义');
      }
    });
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const formRender = vm.$refs.preFormRef;
      if (formRender) {
        vm.refreshComponent();
      } else {
        console.warn('preFormRef 未定义');
      }
    });
  },
  beforeRouteUpdate(to, from, next) {
    const formRender = this.$refs.preFormRef;
    if (formRender) {
      this.refreshComponent();
    } else {
      console.warn('preFormRef 未定义');
    }
    next();
  }
}
</script>

<style scoped lang="scss">
.msg {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
</style>
